<script lang="ts" setup>
import { ref, defineProps, watch, toRefs, withDefaults } from "vue"
import { NCheckbox, NSpace } from "naive-ui"
import myDel from "@/lowCodeCop/myDel.vue"

const props = withDefaults(
  defineProps<{
    list?: string | object
  }>(),
  {
    list: JSON.stringify({
      aaa: false,
      bbb: true,
    }),
  }
)

const { list } = toRefs(props)

type todo = {
  content: string
  status: boolean
}
const todoList = ref<Array<todo>>([])

watch(
  list,
  v => {
    let todo
    if (typeof v == "string") {
      try {
        todo = JSON.parse(v)
      } catch (error) {}
    } else {
      todo = v
    }
    const todoListArr: Array<todo> = []
    for (let key in todo) {
      todoListArr.push({
        content: key,
        status: Boolean(todo[key]),
      })
    }
    todoList.value = todoListArr.sort((a, b) => Number(b.status) - Number(a.status))
  },
  {
    immediate: true,
  }
)
</script>

<template>
  <div class="my-todo">
    <n-space vertical>
      <n-checkbox
        :value="item.content"
        v-for="(item, index) in todoList"
        :key="index"
        :checked="item.status"
      >
        <my-del style="filter: blur(0)" v-if="item.status">{{ item.content }}</my-del>
        <span v-else>{{ item.content }}</span>
      </n-checkbox>
    </n-space>
  </div>
</template>
